<template>
	<view @click.stop="sendsms()" class="send">
		<text v-if="useStatus === 0" class="sendsms" :style="color?'color:'+color:''">{{ text }}</text>
		<text v-else-if="useStatus === 1" class="sending" :style="disColor?'color:'+disColor:''">发送中...</text>
		<text v-else-if="useStatus === 2" class="sendtime" :style="disColor?'color:'+disColor:''">{{ times }}</text>
	</view>
</template>

<script>
	export default {
		props:{
			time: {
				type: Number,
				default: 60
			},
			status: {
				type: Number,
				default: 0
			},
			text: {
				type: String,
				default: '发送验证码'
			},
			color: {
				type: String,
				default: ''
			},
			disColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				times: 0,
				useStatus: 0
			}
		},
		watch:{
			status(val) {
				this.useStatus = val;
				if(val === 2) {
					this.daojishi();
				}
			}
		},
		methods: {
			sendsms() {
				if(this.useStatus === 0) {
					this.$emit('sendsms'); 
				}
			},
			
			daojishi() {
				this.times = this.time;
				let setI = setInterval(() => {
					this.times --;
					if(this.times === 0) {
						this.useStatus = 0;
						clearInterval(setI);
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
.send{
	width: 140rpx;
	@include flex-row;
	align-items: center;
	justify-content: center;
	&sms{
		font-size: 28rpx;
		color: $main-color;
	}
	&ing{
		font-size: 28rpx;
		color: #999;
	}
	&time{
		font-size: 28rpx;
		color: #999;
	}
}
</style>
